import React, { useEffect, useState } from 'react'
import { LeftOutlined } from '@ant-design/icons';
import { SwipeCell, Flex,Button, Image, Typography } from 'react-vant';
import './style.less';
import { useNavigate } from 'react-router-dom';
import { delweicsc, getweicsc } from '../../api/api';

export default function Woshangpin() {
  const Navigate = useNavigate()
  const [data,setData] = useState()
  const user = sessionStorage.getItem('userName')
  useEffect(()=>{
    getweicsc().then(res=>{
      console.log(res)
      setData(res.data.filter(it=>it.name == user))
    })
  },[])
  // console.log(data);
  return (
    <div>
       <header style={{display:'flex',alignItems: 'center',justifyContent: 'space-between',padding:'0 10px',height:'50px'}}>
        <LeftOutlined onClick={()=>{
          window.history.back()
        }}/>
        <h4>我发布的商品</h4>
        <div> </div>
      </header> 
      {data&&data.map(item=>{
        return (
          <SwipeCell
          key={item.id}
            rightAction={
              <Button style={{ height: '100%' }} square type="danger" onClick={()=>{
                delweicsc(item.id).then(res=>console.log(res))
              }}>
                删除
              </Button>
            }
          >
            <Flex className="demo-product-card" align="stretch" style={{justifyContent: 'space-between'}}>
              <Image src={item.img} className="demo-product-card__img" style={{height:'60px',width:'60px'}} />
              <Flex direction="column" justify="between" className="demo-product-card__content">
                <div>
                  <Typography.Title level={5}>{item.tagex}</Typography.Title>
                </div>
              </Flex>
              <Flex direction="column" justify="between" className="demo-product-card__content">
              <Button onClick={()=>{
                Navigate('/woshangpindl/'+ item.id)
              }}>编辑</Button>
              </Flex>
            </Flex>
          </SwipeCell>
        )
      })}

    </div>
  )
}
